<template>
  <view class="login">
    <view class="login-box">
      <view class="login-top"> 登录后可体验更多功能 </view>
      <view class="login-middle">
        <view class="login-image">
          <button
            open-type="chooseAvatar"
            style="background-color: transparent"
            @chooseavatar="onChooseAvatar"
          >
            <image :src="headImage" mode="scaleToFill" />
          </button>
        </view>
        <view class="login-name">
          <view class="name">昵称</view>
          <input
            type="nickname"
            class="input"
            placeholder="请输入昵称"
            @blur="userNameInput"
          />
        </view>
      </view>
      <view class="login-tip">
        <view class="text">
          99%+的用户使用选择微信头像和微信昵称,便于订单发货和售后沟通
        </view>
      </view>
      <view class="login-button">
        <tm-button block label="立即登录" :round="10" :height="80"></tm-button>
      </view>
    </view>

    <view class="icon">
      <myIcon name="icon-close_light" :size="35" color="red"></myIcon>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import myIcon from '@/components/icon/src/font/my-icon.vue'
import headImage from '@/static/image/login/head.png'

const emit = defineEmits(['update:overlayClick'])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },

  overlayClick: {
    type: Boolean,
    default: false,
  },
})
//const { } = toRefs(props);
const userNameInput = (name: any) => {
  console.log(name)
}
const onChooseAvatar = (name: any) => {
  console.log(name)
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  width: 550rpx;
  height: auto;
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 40rpx;
  .login-box {
    width: 100%;
    margin: auto;
    .login-top {
      text-align: center;
    }
    .login-middle {
      height: auto;
      margin: 20rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      .login-image {
        margin: 30rpx 0;
        height: 50%;
        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
        }
      }

      .login-name {
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 40rpx;
        .name {
          width: 75rpx;
        }
        .input {
          width: calc(100% - 100rpx);
          margin-left: 10rpx;
          height: 50rpx;
          border-bottom: 1px solid #9a9a9a;
          font-size: 24rpx;
        }
      }
    }
    .login-tip {
      background-color: #f6f7fb;
      padding: 10rpx;
      margin: 15rpx 0;
      .text {
        color: #9a9a9a;
        line-height: 2em;
        font-size: 0.7rem;
      }
    }
    .login-button {
      margin-top: 30rpx;
    }
  }

  .icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
  }
}
</style>
